/**
 * 使用Context对象跨多几组件通信
 * 步骤：
 * 1. 创建Context对象：React.createContext()=> Provider（提供数据）和Consumer（接收数据）组件
 * 2. 使用Provider组件包裹要共享数据的组件，通过Provider组件的value属性提供共享数据
 * 3. 使用Consumer组件接收共享数据
 */

import React, { Component } from 'react'

import { Provider, Consumer } from './acontext'

console.log(Provider, Consumer)

//  子组件
const Child3 = () => {

  return (
    <div>
      <h3>函数子组件3</h3>
      {/* 获取根组件的数据 */}
      <Consumer>{(data) => {
        console.log('获取根组件的数据:', data)
        return <p>{data}</p>
      }}</Consumer>
    </div>
  )
}


class Child2 extends Component {


  // 接收共享数据(回调函数)
  reciveData = (data) => {
    console.log('Child2:', data)
    return <div>
      <h2 style={{ background: 'red', color: '#fff' }}>{data}</h2>
    </div>
  }

  render () {
    return (
      <div>
        <h2>类子组件2</h2>
        <hr />
        {/* 获取共享数据 */}
        <Consumer>{this.reciveData}</Consumer>
        <Child3 />
      </div>
    )
  }
}


class Child1 extends Component {
  render () {
    return (
      <div>
        <h1>类子组件1</h1>
        <hr />
        <Child2 />
      </div>
    )
  }
}



// 根组件
class App extends Component {

  state = {
    a: 10000
  }

  changeA = () => {
    this.setState({
      a: Math.random() * 1000
    })
  }

  render () {
    return (
      <Provider value={this.state.a}>
        <h1>app</h1>
        <button onClick={this.changeA}>change</button>
        <hr />
        <Child1 />
      </Provider>
    )
  }
}

export default App